Chart for WinRT
Animating a Pie Chart

You can also add animation to the Pie Chart. This will allow the user to tap or click a pie slice, causing it to spin to the top and display the value in a common TextBlock control. 

Complete the following steps:

  1. Click between the <Grid> </Grid> tags in MainPage.xaml and insert the following XAML markup :
XAML
Copy Code
<Chart:C1ChartName="chart"Palette="Flow"Grid.Row="1"Margin="0 10 0 0" />
        <StackPanelVerticalAlignment="Top"x:Name="panelLabel"Visibility="Collapsed">
            <PolygonFill="#C0000000"Margin="0 0 0 -113"HorizontalAlignment="Center"
                     Points="0 50 20 0 40 50"Width="40"Height="50"RenderTransformOrigin="0.5,0.5" >
                <Polygon.RenderTransform>
                    <CompositeTransformRotation="180"/>
                </Polygon.RenderTransform>
            </Polygon>
            <BorderCornerRadius="10"Padding="20 4"Margin="0 0 0 -10"Background="#C0000000"Width="200">
                <StackPanelOrientation="Horizontal"HorizontalAlignment="Center">
                    <TextBlockx:Name="txtName"FontSize="20"Foreground="White"/>
                    <TextBlockText=": "FontSize="20"Foreground="White"/>
                    <TextBlockx:Name="txtPopulation"FontSize="20"Foreground="White"/>
                </StackPanel>
            </Border>
        </StackPanel>
  1. Right-click the page and select View | Code to switch to code view. Add the following namespace to your application:
C#
Copy Code
using C1.Xaml.Chart;
  1. Edit your page's constructor so it resembles the following:
C#
Copy Code
public PieAnimation()
{
            this.InitializeComponent(); 
            var ds = new DataSeries() { ValuesSource = new double[] { 1, 2, 3, 4 } };
            ds.PlotElementLoaded += new EventHandler(ds_PlotElementLoaded); 
            chart.ManipulationMode = ManipulationModes.All;
            chart.Data.Children.Add(ds);
            chart.ChartType = ChartType.Pie; 
            chart.Data.ItemNames = new string[] { "USA", "China", "Russia", "Japan" };
            //RunAnimation(this, "StartingAngle", TimeSpan.FromSeconds(0.5), StartingAngle - 0);
}  

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback